<template>
  <div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片试图区 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- Input查询框 -->
          <el-input placeholder="请输入内容" class="input-with-select" clearable v-model="productList.query" @clear="getItemsList" @keyup.enter.native="getItemsList">
            <el-button slot="append" icon="el-icon-search" @click="getItemsList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addGoods">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 商品Table列表区 -->
      <el-table :data="productListData" border stripe>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）" width="95px">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="70px">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="160px">
          <template slot-scope="scope">
            {{scope.row.add_time*1000|dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="small" disabled @click="editCommoditys(scope.row.goods_id) ">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteDoods(scope.row.goods_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="productList.pagenum" :page-sizes="[5, 10, 20, 30]" :page-size="productList.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 编辑对话框 -->
    <!-- <el-dialog :visible.sync="editVisible" width="80%">
      <el-card class="dialog"> -->
    <!-- 注意提示区 -->
    <!-- <el-alert title="编辑商品信息" type="info" center show-icon> </el-alert> -->
    <!-- 完成步骤条 -->
    <!-- <el-steps style="margin:15px 0" :active="numberActive-0" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps> -->
    <!-- 切换标签页 -->
    <!-- <el-form :model="editgoods" :rules="editrules" ref="addRuleForm" label-width="100px" label-position="top">
          <el-tabs v-model="numberActive" :tab-position="'left'" :before-leave="beforeTabLeave" @tab-click="switchBar">
            <el-tab-pane label="基本信息" name="0">
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="editgoods.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="goods_price">
                <el-input v-model="editgoods.goods_price" type="number"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" prop="goods_weight">
                <el-input v-model="editgoods.goods_weight" type="number"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="goods_number">
                <el-input v-model="editgoods.goods_number" type="number"></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="goods_cat">
                <el-cascader :options="editgoods" :props="{ expandTrigger:'hover',value:'cat_id',label:'cat_name',children:'children'}" v-model="editgoods.goods_cat"></el-cascader>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1"> -->
    <!-- 渲染表单的Item项动态属性 -->
    <!-- <el-form-item :label="item.attr_name" v-for="item in  manyParameter" :key="item.attr_id">
                <el-checkbox-group v-model="item.attr_vals">
                  <el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" :key="i" border></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="商品属性" name="2"> -->
    <!-- 渲染表单的Item项静态属性 -->
    <!-- <el-form-item :label="item.attr_name" v-for="item in  onlyParameter" :key="item.attr_id">
                <el-input v-model="item.attr_vals"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="商品图片" name="3">
              <el-upload action="http://127.0.0.1:8888/api/private/v1/upload" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="4"> -->
    <!-- 文本编辑器 -->
    <!-- <quill-editor v-model="editgoods.goods_introduce"></quill-editor>
              <el-button type="primary" @click="editSp" class="btn">添加商品</el-button>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-card> -->
    <!-- 浏览图片的对话框 -->
    <!-- <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
        <img :src="editgoods.pics.pics_big" width="100%">
      </el-dialog>
    </el-dialog> -->
  </div>
</template>

<script>
  export default {
    name: 'List',
    data () {
      return {
        // numberActive: '0',
        // 商品动态参数
        // manyParameter: [],
        // 商品静态属性
        // onlyParameter: [],
        // 存放图片的真实地址
        // previewPath: '',
        // // 商品的参数
        // editgoods: [
        //   pics_big
        // ],
        // // 商品列表数据
        // cateLists: [],
        // 图片Token表头
        // headerObj: {
        //   Authorization: window.sessionStorage.getItem('token')
        // },
        //  获取数据要的参数    
        productList: {
          // 查询参数
          query: '',
          // 当前页码
          pagenum: 1,
          // 每页显示条数
          pagesize: 10
        },
        // 总数据条数
        total: 0,
        // 商品列表数据源  
        productListData: [],

        // 关闭编辑对话框
        editVisible: false,
        previewVisible: false,
        // 表单验证
        // editrules: {
        //   goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        //   goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        //   goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],
        //   goods_number: [{ required: true, message: '请输入商品数量', trigger: 'blur' }],
        // },
      }
    },
    created () {
      this.getItemsList();
      // this.cateList();
    },
    methods: {
      // // 获取商品列表
      // async cateList () {
      //   const { data: res } = await this.$http.get('categories')
      //   if (res.meta.status !== 200) {
      //     return this.$message.error('获取商品列表数据失败')
      //   }
      //   this.cateLists = res.data
      //   console.log(this.cateLists);
      // },
      // 监听级联选择器变化事件
      // handleChange () {
      // },
      beforeTabLeave (activeName, oldActiveName) {
        if (oldActiveName === "0" && this.editgoods.goods_cat.length !== 3) {
          this.$message.error('请选择商品分类')
          return false
        }
      },
      async getItemsList () {
        const { data: res } = await this.$http.get('goods', { params: this.productList })
        if (res.meta.status !== 200) {
          return this.$message.error('获取参数列表失败')
        }
        this.productListData = res.data.goods
        this.total = res.data.total
        // console.log(this.productListData);
      },
      handleSizeChange (newSize) {
        this.productList.pagesize = newSize
        this.getItemsList();
      },
      handleCurrentChange (newPage) {
        this.productList.pagenum = newPage
        this.getItemsList();
      },
      // 添加商品
      addGoods () {
        this.$router.push('/goods/add')
      },
      // 删除商品列表
      async deleteDoods (goods_id) {
        const confirmResult = await this.$confirm(
          '此操作将永久删除该商品, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除！')
        }
        // 删除的业务逻辑
        const { data: res } = await this.$http.delete(
          `goods/${goods_id}`
        )

        if (res.meta.status !== 200) {
          return this.$message.error('删除参数失败！')
        }
        this.$message.success('删除参数成功！')
        this.getItemsList();
      },
      // 获取商品ID
      async editCommoditys (id) {
        const { data: res } = await this.$http.get(`goods/${id}`)
        this.editgoods = res.data
        console.log(res.data);
        this.editVisible = true;
      },
      // beforeTabLeave () {

      // },

      // 监听切换页切换事件
      // async switchBar () {
      //   if (this.numberActive === '1' || this.editgoods.attrs.attr_sel === 'many') {
      //     // 获取动态参数

      //     this.editgoods.attrs.forEach(item => {
      //       item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(',')
      //       this.manyParameter = this.editgoods.attrs
      //     });

      //   } else if (this.numberActive === '2' || this.editgoods.attrs.attr_sel === 'noly') {
      //     this.onlyParameter = this.editgoods.attrs
      //   }
      // },
      // handlePreview (file) {
      //   this.previewPath = file.response.data.url
      //   this.previewVisible = true
      // },
      // // 监听文件列表移除图片时
      // handleRemove (file) {
      //   // 1. 获取将要删除的图片的临时路径
      //   const filePath = file.response.data.tmp_path
      //   // 2. 从 addruleForm.pics 数组中，找到这个图片对应的索引值
      //   const i = this.editgoods.pics.findIndex(item =>
      //     item.pic === filePath)
      //   // 3. 调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除
      //   this.editgoods.pics.splice(i, 1)
      //   console.log(this.addruleForm);
      // },
      // // 监听图片是否上传成功
      // handleSuccess (response) {
      //   console.log(response);
      //   // 拼接得到一个图片信息对象
      //   const picInfo = { pic: response.data.tmp_path }
      //   // 将图片信息对象push到pics数组中
      //   this.editgoods.pics.push(picInfo)
      //   console.log(this.editgoods);
      // },
      // // 添加商品
      // editSp () {
      //   // 全部表单预验证
      //   this.$refs.addRuleForm.validate(async valid => {
      //     if (!valid) {
      //       return
      //     }
      //     const { data: res } = await this.$http.put(`goods/${this.editgoods.goods_id}`, {
      //       goods_name: this.editgoods.goods_name,
      //       goods_price: this.editgoods.goods_price,
      //       goods_number: this.editgoods.goods_number,
      //       goods_weight: this.editgoods.goods_weight,
      //       goods_cat: 200
      //       // goods_introduce: this.editgoods.goods_introduce,
      //       // pics: this.editgoods.pics,
      //       // attrs: this.editgoods.attrs,
      //     })
      //     console.log(res);
      //     this.editVisible = false
      //   })
      // }
    },

  }
</script>

<style lang="less" scoped>
.dialog{
  min-height:800px;
}
.el-cascader{
  width: 240px;
}
.btn{
  float:right;
  margin: 10px 0 0 0;
}
</style>